//自定义指令
// v-focus 
import Vue from "vue";
// Vue.directive("自定义指令名称",指令执行函数())
Vue.directive("wangkaidi",function(el , bind){
    console.log(el)
    el.style.fontSize = "100px";
    el.innerHTML = el.innerHTML +"啊啊啊啊啊啊"
    console.log(bind)
})
// 表单自动获取焦点指令
Vue.directive("focus",{
    inserted(el,bind){
        // 保证DOM渲染到页面后在执行该执行
        console.log(el.firstElementChild.focus())
    }
})
// DragWindow 拖拽弹窗
Vue.directive("DragWindow" ,{
    inserted(el , bind){
        console.log(el)
        let elDialog = el.getElementsByClassName("el-dialog")[0];
        let elDialogHeader = el.getElementsByClassName("el-dialog__header")[0];
        elDialogHeader.style.cursor = "move";
        // 获取弹窗的所有样式
        let style = elDialog.currentStyle || window.getComputedStyle(elDialog,null);
        elDialogHeader.onmousedown = (e) =>{
            // event 事件对象
            let disX  = e.clientX - elDialogHeader.offsetLeft;
            let disY = e.clientY - elDialogHeader.offsetTop;
            let styL ;
            let styT;

            styL =+style.left.replace(/\px/g,"");
            styT =+style.top.replace(/\px/g,"");
            document.onmousemove = function(e){
                let l = e.clientX - disX;
                let t = e.clientY - disY;
                console.log(l, styL)
                elDialog.style.left = `${l + styL}px`;
                elDialog.style.top = `${t + styT}px`;
            }
            document.onmouseup = function(){
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

    }
})